<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext/Sencha GridComboBox 基础示例</title>
<meta name="description" content="Ext/Sencha GridComboBox 基础示例" />
<meta name="keywords" content="Ext Grid ComboBox Plugin" />
<link rel="stylesheet" type="text/css" href="/css/ext/ext-all.css" />
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<script src="/js/ext/GridComboBox.js"></script>
<script src="/js/ext/GridComboBoxList.js"></script>
<link rel="stylesheet" type="text/css" href="/css/default.css" />
<style type="text/css">
.demoTitle { margin: 12px; font-size: 16px; }
</style>
<script type="text/javascript">
Ext.onReady(function() {
	var gdCbxSt1 = new Ext.data.ArrayStore({
	pageSize: 50,
	autoLoad : false,
	fields : [ {
		name: 'no'
	}, {
		name: 'subject'
	}, {
		name: 'credit'
	}, {
		name: 'debit'
	}, {
		name: 'summary'
	} ],
	proxy : {
		type : 'ajax',
		url : '/javascript/grid/data.php',
		reader : {
			type : 'json',
			root : 'data.list',
			totalProperty: 'data.total'
		}
	}
});
var gdCbxSt2 = new Ext.data.ArrayStore({
	pageSize: 50,
	autoLoad : false,
	fields : [ {
		name: 'no'
	}, {
		name: 'subject'
	}, {
		name: 'credit'
	}, {
		name: 'debit'
	}, {
		name: 'summary'
	} ],
	proxy : {
		type : 'ajax',
		url : '/javascript/grid/data.php',
		reader : {
			type : 'json',
			root : 'data.list',
			totalProperty: 'data.total'
		}
	}
});
var gdCbx1 = new Ext.form.field.GridComboBox({
	fieldLabel : 'Grid ComboBox',
	multiSelect : false,
	displayField : 'subject',
	valueField : 'no',
	width : 300,
	labelWidth : 100,
	labelAlign: 'right',
	store : gdCbxSt1,
	typeAhead : true,
	queryMode : 'remote',
	matchFieldWidth : false,
	pickerAlign: 'bl',
	gridCfg : {
		store : gdCbxSt1,
		height: 200,
		width: 400,
		columns : [ {
			text : 'No',
			width : 40,
			dataIndex : 'no'
		}, {
			text : 'Subject',
			width : 120,
			dataIndex : 'subject'
		}, {
			text : 'Credit',
			width : 60,
			dataIndex : 'credit'
		}, {
			text : 'Debit',
			width : 60,
			dataIndex : 'debit'
		}, {
			text : 'Summary',
			width : 200,
			dataIndex : 'summary'
		} ],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : gdCbxSt1,
			displayInfo : true,
			displayMsg : 'Displaying {0} - {1} of {2}',
			emptyMsg : "No data to display"
		})
	}
});
var gdCbx2 = new Ext.form.field.GridComboBox({
	fieldLabel : 'Grid ComboBox',
	multiSelect : true,
	displayField : 'subject',
	valueField : 'no',
	width : 300,
	labelWidth : 100,
	labelAlign: 'right',
	store : gdCbxSt2,
	queryMode : 'remote',
	matchFieldWidth : false,
	pickerAlign: 'bl',
	gridCfg : {
		store : gdCbxSt2,
		selModel : new Ext.selection.CheckboxModel({
			checkOnly: true
		}),
		height: 200,
		width: 400,
		columns : [ {
			text : 'No',
			width : 40,
			dataIndex : 'no'
		}, {
			text : 'Subject',
			width : 120,
			dataIndex : 'subject'
		}, {
			text : 'Credit',
			width : 60,
			dataIndex : 'credit'
		}, {
			text : 'Debit',
			width : 60,
			dataIndex : 'debit'
		}, {
			text : 'Summary',
			width : 200,
			dataIndex : 'summary'
		} ],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : gdCbxSt2,
			displayInfo : true,
			displayMsg : 'Displaying {0} - {1} of {2}',
			emptyMsg : "No data to display"
		})
	}
});
new Ext.panel.Panel({
	renderTo: 'demo',
	items: [
		new Ext.form.Panel({
			frame : true,
			title: 'Grid ComboBox Demo, Single Selection.',
			layout: 'hbox',
			defaults: {
				xtype: 'button', margin: 2, width: 60
			},
			items : [ gdCbx1, {
				text: 'get', handler: function(){
					alert(gdCbx1.getSubmitValue());
				}
			},{
				text: 'set', handler: function(){
					gdCbx1.setValue([{"no": "2", "subject": "Subject 002" }]);
					//Now you can do set value like this
					//gdCbx1.setSubmitValue('2');
				}
			} ]
		}),
		new Ext.form.Panel({
			frame : true,
			title: 'Grid ComboBox Demo, Multi Selection.',
			layout: 'hbox',
			defaults: {
				xtype: 'button', margin: 2, width: 60
			},
			items : [ gdCbx2, {
				text: 'get', handler: function(){
					alert(gdCbx2.getSubmitValue());
				}
			},{
				text: 'set', handler: function(){
					gdCbx2.setValue([
						{"no": "1", "subject":"Subject 001" },
						{"no": "101", "subject":"Subject 101" }
					]);
					//Now you can do set value like this
					//gdCbx2.setSubmitValue(['2', '101']);
				}
			} ]
		})
	]
});		
});
</script>
</head>
<body>
<div id="head">
	<a href="/cn/"><img src="/css/images/logo_s.png" alt="logo" /></a>
	<div class="title">BOARSOFT.COM</div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://www.jquery.com" target="_blank">JQuery</a>
			|
			<a href="http://www.jqueryui.com" target="_blank">JQuery UI</a>
			|
			<a href="http://code.google.com/p/dynatree/" target="_blank">JQuery Dynatree Plugin</a>
			&nbsp;&nbsp;
		</div>
		<div>
			This site has JQuery, Ext/Sencha Plugins, such as: Grid Combobox Tree Tabs&nbsp;&nbsp;<br/>
			Please use IE7+, FireFox, Chrome&nbsp;&nbsp;
		</div>
	</div>
</div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/cn/">Home</a>
		&gt;
		<a href="/cn/mac/js">Javascript</a>
		&gt;
		<a href="/cn/mac/js/gridCombo">Magic GridCombo Ext/Sencha</a>
		&gt;
		JQuery MagicCombo 下拉框基本功能示例	</div>
	<div id="nav_back">
		<a href="doc" target="_blank">文档</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/cn/mac/js">下载</a>
		|
		<select id="nav_jump">
			<option value="basic">Ext/Sencha GridComboBox 基础示例</option>
		</select>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle">Ext/Sencha GridComboBox 基础示例. see also <a href="/cn/mac/js/combo/grid1.html">My JQuery MagicCombo</a></h2>
</div>
<div id="demo" class="demoPanel">
This component was fixed at 2012-05-07 by <b>文●定天下</b>. Latest version 1.2.1<br />
<b>Support Ext4.1 now.</b>
</div>
<textarea class="demoSource">
var gdCbxSt1 = new Ext.data.ArrayStore({
	pageSize: 50,
	autoLoad : false,
	fields : [ {
		name: 'no'
	}, {
		name: 'subject'
	}, {
		name: 'credit'
	}, {
		name: 'debit'
	}, {
		name: 'summary'
	} ],
	proxy : {
		type : 'ajax',
		url : '/javascript/grid/data.php',
		reader : {
			type : 'json',
			root : 'data.list',
			totalProperty: 'data.total'
		}
	}
});
var gdCbxSt2 = new Ext.data.ArrayStore({
	pageSize: 50,
	autoLoad : false,
	fields : [ {
		name: 'no'
	}, {
		name: 'subject'
	}, {
		name: 'credit'
	}, {
		name: 'debit'
	}, {
		name: 'summary'
	} ],
	proxy : {
		type : 'ajax',
		url : '/javascript/grid/data.php',
		reader : {
			type : 'json',
			root : 'data.list',
			totalProperty: 'data.total'
		}
	}
});
var gdCbx1 = new Ext.form.field.GridComboBox({
	fieldLabel : 'Grid ComboBox',
	multiSelect : false,
	displayField : 'subject',
	valueField : 'no',
	width : 300,
	labelWidth : 100,
	labelAlign: 'right',
	store : gdCbxSt1,
	typeAhead : true,
	queryMode : 'remote',
	matchFieldWidth : false,
	pickerAlign: 'bl',
	gridCfg : {
		store : gdCbxSt1,
		height: 200,
		width: 400,
		columns : [ {
			text : 'No',
			width : 40,
			dataIndex : 'no'
		}, {
			text : 'Subject',
			width : 120,
			dataIndex : 'subject'
		}, {
			text : 'Credit',
			width : 60,
			dataIndex : 'credit'
		}, {
			text : 'Debit',
			width : 60,
			dataIndex : 'debit'
		}, {
			text : 'Summary',
			width : 200,
			dataIndex : 'summary'
		} ],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : gdCbxSt1,
			displayInfo : true,
			displayMsg : 'Displaying {0} - {1} of {2}',
			emptyMsg : &quot;No data to display&quot;
		})
	}
});
var gdCbx2 = new Ext.form.field.GridComboBox({
	fieldLabel : 'Grid ComboBox',
	multiSelect : true,
	displayField : 'subject',
	valueField : 'no',
	width : 300,
	labelWidth : 100,
	labelAlign: 'right',
	store : gdCbxSt2,
	queryMode : 'remote',
	matchFieldWidth : false,
	pickerAlign: 'bl',
	gridCfg : {
		store : gdCbxSt2,
		selModel : new Ext.selection.CheckboxModel({
			checkOnly: true
		}),
		height: 200,
		width: 400,
		columns : [ {
			text : 'No',
			width : 40,
			dataIndex : 'no'
		}, {
			text : 'Subject',
			width : 120,
			dataIndex : 'subject'
		}, {
			text : 'Credit',
			width : 60,
			dataIndex : 'credit'
		}, {
			text : 'Debit',
			width : 60,
			dataIndex : 'debit'
		}, {
			text : 'Summary',
			width : 200,
			dataIndex : 'summary'
		} ],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : gdCbxSt2,
			displayInfo : true,
			displayMsg : 'Displaying {0} - {1} of {2}',
			emptyMsg : &quot;No data to display&quot;
		})
	}
});
new Ext.panel.Panel({
	renderTo: 'demo',
	items: [
		new Ext.form.Panel({
			frame : true,
			title: 'Grid ComboBox Demo, Single Selection.',
			layout: 'hbox',
			defaults: {
				xtype: 'button', margin: 2, width: 60
			},
			items : [ gdCbx1, {
				text: 'get', handler: function(){
					alert(gdCbx1.getSubmitValue());
				}
			},{
				text: 'set', handler: function(){
					gdCbx1.setValue([{&quot;no&quot;: &quot;2&quot;, &quot;subject&quot;: &quot;Subject 002&quot; }]);
					//Now you can do set value like this
					//gdCbx1.setSubmitValue('2');
				}
			} ]
		}),
		new Ext.form.Panel({
			frame : true,
			title: 'Grid ComboBox Demo, Multi Selection.',
			layout: 'hbox',
			defaults: {
				xtype: 'button', margin: 2, width: 60
			},
			items : [ gdCbx2, {
				text: 'get', handler: function(){
					alert(gdCbx2.getSubmitValue());
				}
			},{
				text: 'set', handler: function(){
					gdCbx2.setValue([
						{&quot;no&quot;: &quot;1&quot;, &quot;subject&quot;:&quot;Subject 001&quot; },
						{&quot;no&quot;: &quot;101&quot;, &quot;subject&quot;:&quot;Subject 101&quot; }
					]);
					//Now you can do set value like this
					//gdCbx2.setSubmitValue(['2', '101']);
				}
			} ]
		})
	]
});</textarea>
<iframe src="/mac/js/related.php" class="related"></iframe>
<div id="foot">
Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
QQ: 7213571&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
&nbsp;&nbsp;
</div></body>
</html>
